import Vue from 'vue'
import Vuex from 'vuex'
import utils from '../common/js/utils'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    mapOption: {
      backgroundColor: '#404a59',
      tooltip: { // 鼠标悬停的弹出信息
        formatter: function (obj) {
          return obj.name // 显示name属性
        }
      },
      visualMap: {
        show: false,
        min: 0,
        max: 1,
        color: ['#d94e5d'], // 标点的颜色
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        roam: true,
        label: {
          normal: {
            show: true,
            color: '#ccc'
          },
          emphasis: {
            show: true,
            color: '#fff'
          }
        },
        itemStyle: {
          normal: {
            areaColor: '#323c48',
            borderColor: '#111'
          },
          emphasis: {
            areaColor: '#2a333d'
          }
        }
      },
      series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [],
        symbolSize: 10,
        symbol: 'circle'
      }]
    }
  },
  getters: {
    mapOption() {
      return store.state.mapOption;
    }
  },
  actions: {
    updateValue(store, {type, value}) {
      if (type === 'color') {
        store.state.mapOption.visualMap.color[0] = value;
      } else if (type === 'shape') {
        store.state.mapOption.series[0].symbol = value;
      } else if (type === 'size') {
        store.state.mapOption.series[0].symbolSize = value;
      } else if (type === 'backgroundColor') {
        store.state.mapOption.backgroundColor = value;
      } else if (type === 'data') {
        store.state.mapOption.series[0].data = utils.convertData(value)
      }
    }
  }
})

export default store
